<template>
  <div class="move-box">
    <ul class="main-tab">
        <li :class="tabActive==index?'tab-item tab-active cur':'tab-item cur'" @click="clickActive(index,item.path)" v-for="(item,index) in tabBar" :key="index">{{ item.title }}</li>
    </ul>
    <!-- 路由窗口 -->
    <template>
      <div class="show-view">
        <router-view></router-view>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name:'Move',
  data(){
    return {
      tabBar:[{title:'MV',path:'/home/move/mv'},{title:'视频',path:'/home/move/shipin'}],
      tabActive:0
    }
  },
  methods:{
    clickActive(index,path){
      this.tabActive = index
      this.$router.replace(path)
    }
  }
}
</script>

<style lang="less" scoped>
.main-tab {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3px 0px;
    margin-bottom: .4rem;
    .tab-item {
      cursor: pointer;
      position: relative;
      padding: .4rem .6rem;
      font-size: .7rem;
    }
    .tab-active {
      font-weight: 700;
      font-size: .9rem;
    }
    .tab-active::after {
          position: absolute;
          content: '';
          width: 60%;
          height: 1px;
          background: #ec4141;
          border-radius: 10px;
          display: block;
          padding-top: 1px;
          left: 50%;
          transform: translateX(-50%);
          bottom: -1px;
    }
  }
  .show-view {
    width: 100%;
    background: rgb(250, 250, 250);
    overflow: hidden;
    padding-bottom: 4rem;
  }
</style>